JavaScript Object.assign vs Spread: Prestandajämförelse och användningsfall

I JavaScript är manipulering av objekt en vanlig uppgift. Två populära metoder för att uppnå detta är Object.assign() och spread-syntaxen (...). Även om båda kan användas för att kopiera egenskaper från ett eller flera objekt till ett målobjekt, skiljer de sig åt i prestandaegenskaper, användningsfall och övergripande beteende. Denna artikel ger en omfattande jämförelse för att hjälpa dig att välja rätt verktyg för jobbet.

Förstå Object.assign()

Object.assign() är en metod som kopierar värdena för alla uppräkningsbara egna egenskaper från ett eller flera källobjekt till ett målobjekt. Den returnerar det modifierade målobjektet.

Syntax:

            Object.assign(target, ...sources)
            

              
                Copy
              
            
          

Exempel:

            const target = { a: 1 };
const source = { b: 2, c: 3 };

const returnedTarget = Object.assign(target, source);

console.log(target); // { a: 1, b: 2, c: 3 }
console.log(returnedTarget === target); // true

            

              
                Copy
              
            
          

I detta exempel kopieras egenskaperna b och c från source-objektet till target-objektet. Object.assign() modifierar det ursprungliga target-objektet och returnerar det.

Förstå Spread-syntax

Spread-syntaxen (...) tillåter att ett itererbart objekt, såsom en array eller ett objekt, expanderas på platser där noll eller flera argument (för funktionsanrop), element (för array-literaler) eller nyckel-värde-par (för objekt-literaler) förväntas.

Syntax (Objekt-literal):

            const newObject = { ...object1, ...object2 };
            

              
                Copy
              
            
          

Exempel:

            const obj1 = { a: 1 };
const obj2 = { b: 2, c: 3 };

const mergedObj = { ...obj1, ...obj2 };

console.log(mergedObj); // { a: 1, b: 2, c: 3 }

            

              
                Copy
              
            
          

Här skapar spread-syntaxen ett nytt objekt, mergedObj, genom att kombinera egenskaperna från obj1 och obj2.

Prestandajämförelse

Prestandaskillnaden mellan Object.assign() och spread-syntaxen kan variera beroende på JavaScript-motorn och komplexiteten hos de objekt som manipuleras. Generellt sett tenderar spread-syntaxen att vara något snabbare för enkel objektkloning och sammanslagning. Skillnaden är dock ofta försumbar för små objekt. För större objekt, mer komplexa scenarier och upprepade operationer rekommenderas mikro-benchmarking för att avgöra det snabbaste tillvägagångssättet för just ditt användningsfall. Låt oss titta på olika scenarier:

Scenario 1: Enkel objektkloning

Vid kloning av ett enskilt objekt uppvisar spread-syntaxen generellt bättre prestanda på grund av dess mer strömlinjeformade operation.

            const original = { a: 1, b: 2, c: 3 };

// Spread Syntax
const cloneSpread = { ...original };

// Object.assign()
const cloneAssign = Object.assign({}, original);

            

              
                Copy
              
            
          

Scenario 2: Sammanslagning av flera objekt

När flera objekt slås samman är prestandaskillnaden mellan de två metoderna ofta minimal, men spread-syntaxen behåller ofta en liten fördel, främst för att den är implementerad nativt i moderna JavaScript-motorer.

            const obj1 = { a: 1 };
const obj2 = { b: 2 };
const obj3 = { c: 3 };

// Spread Syntax
const mergedSpread = { ...obj1, ...obj2, ...obj3 };

// Object.assign()
const mergedAssign = Object.assign({}, obj1, obj2, obj3);

            

              
                Copy
              
            
          

Scenario 3: Stora objekt med många egenskaper

När man hanterar stora objekt som innehåller hundratals eller tusentals egenskaper kan prestandaskillnaderna bli mer märkbara. I dessa fall behåller spread-syntaxen ofta sin fördel på grund av effektivare minnesallokering och kopiering av egenskaper inom motorn.

Benchmarking

För att få exakta prestandamätningar, överväg att använda benchmarking-verktyg som Benchmark.js. Dessa verktyg låter dig köra upprepade tester och samla in statistik för att avgöra vilken metod som presterar bäst under specifika förhållanden.

Exempel med Benchmark.js:

            const Benchmark = require('benchmark');

const suite = new Benchmark.Suite;

const obj1 = { a: 1 };
const obj2 = { b: 2 };
const obj3 = { c: 3 };

// add tests
suite.add('Spread Syntax', function() {
  const mergedSpread = { ...obj1, ...obj2, ...obj3 };
})
.add('Object.assign()', function() {
  const mergedAssign = Object.assign({}, obj1, obj2, obj3);
})
// add listeners
.on('cycle', function(event) {
  console.log(String(event.target));
})
.on('complete', function() {
  console.log('Fastest is ' + this.filter('fastest').map('name'));
})
// run async
.run({ 'async': true });

            

              
                Copy
              
            
          

Detta kodexempel visar hur man sätter upp ett prestandatest med Benchmark.js för att jämföra prestandan mellan spread-syntax och Object.assign() vid sammanslagning av flera objekt. Kom ihåg att installera biblioteket med npm install benchmark innan du kör skriptet.

Användningsfall

Även om prestanda är en faktor, beror valet mellan Object.assign() och spread-syntaxen ofta på det specifika användningsfallet och personliga kodstilspreferenser.

Användningsfall för Object.assign()

• Modifiera målobjektet: Object.assign() modifierar målobjektet direkt, vilket kan vara användbart när du vill uppdatera ett befintligt objekt på plats.
• Kompatibilitet med äldre webbläsare: Object.assign() har bredare webbläsarstöd jämfört med spread-syntaxen, vilket gör den lämplig för projekt som riktar sig mot äldre miljöer. Du kan behöva en polyfill för äldre webbläsare.
• Integrering med befintliga kodbaser: Om du arbetar med en befintlig kodbas som i stor utsträckning använder Object.assign(), kan det vara bra att hålla sig till den för att bibehålla konsekvens och minska risken för att introducera buggar.
• Sätta standardvärden: Den kan användas för att tillämpa standardvärden på ett objekt, vilket säkerställer att vissa egenskaper alltid är definierade.

              const defaults = { a: 1, b: 2, c: 3 };
  const options = { a: 10, d: 4 };
  
  const config = Object.assign({}, defaults, options);
  console.log(config); // { a: 10, b: 2, c: 3, d: 4 }
  
              
  
                
                  Copy
                
              
            

Användningsfall för Spread-syntax

• Skapa nya objekt: Spread-syntaxen är utmärkt för att skapa nya objekt utan att modifiera de ursprungliga, vilket främjar oföränderlighet (immutability).
• Koncis syntax: Spread-syntaxen resulterar ofta i mer läsbar och koncis kod, särskilt vid sammanslagning av flera objekt.
• React och Redux: I React och Redux, där oföränderlighet är avgörande för prestanda och state-hantering, används spread-syntaxen i stor utsträckning för att skapa uppdaterade versioner av state-objekt.
• Funktionell programmering: Den passar väl ihop med principerna för funktionell programmering, där man uppmuntras att undvika sidoeffekter och arbeta med oföränderlig data.

Ytlig kopia vs. Djupkopia

Det är avgörande att förstå att både Object.assign() och spread-syntaxen utför en ytlig kopiering (shallow copy). Det innebär att om objektet innehåller nästlade objekt, kopieras endast referenserna till dessa nästlade objekt, inte de nästlade objekten själva. Att modifiera ett nästlat objekt i det kopierade objektet kommer även att påverka det ursprungliga objektet, och vice versa.

Exempel:

            const original = {
  a: 1,
  b: { c: 2 }
};

const copied = { ...original };

copied.b.c = 3;

console.log(original.b.c); // 3 - Det ursprungliga objektet är modifierat!

            

              
                Copy
              
            
          

Om du behöver skapa en djupkopia (deep copy), där även nästlade objekt kopieras, kan du använda tekniker som:

• JSON.parse(JSON.stringify(object)): Detta är en enkel men potentiellt ineffektiv metod, särskilt för stora eller komplexa objekt. Den hanterar inte heller funktioner eller cirkulära referenser korrekt.
• Använda ett bibliotek som Lodashs _.cloneDeep(): Bibliotek som Lodash erbjuder optimerade funktioner för djupkloning som hanterar olika kantfall.
• Skriva en egen rekursiv funktion för djupkopiering: Detta låter dig kontrollera kloningsprocessen och hantera specifika datatyper eller strukturer.

Oföränderlighet (Immutability)

Oföränderlighet (immutability) är ett programmeringskoncept som betonar att man skapar nya datastrukturer istället för att modifiera befintliga. Detta tillvägagångssätt kan leda till mer förutsägbar kod, enklare felsökning och förbättrad prestanda i vissa scenarier. Både Object.assign() och spread-syntaxen kan användas för att främja oföränderlighet, men spread-syntaxen föredras generellt på grund av dess förmåga att skapa nya objekt mer direkt.

För att uppnå oföränderlighet med Object.assign() krävs det att man först skapar ett nytt målobjekt:

            const original = { a: 1, b: 2 };
const updated = Object.assign({}, original, { a: 10 });

console.log(original); // { a: 1, b: 2 }
console.log(updated);  // { a: 10, b: 2 }

            

              
                Copy
              
            
          

            const original = { a: 1, b: 2 };
const updated = { ...original, a: 10 };

console.log(original); // { a: 1, b: 2 }
console.log(updated);  // { a: 10, b: 2 }

            

              
                Copy
              
            
          

Praktiska exempel

Exempel 1: Uppdatera användarprofildata

Föreställ dig att du har ett användarprofilobjekt och vill uppdatera det med ny information från ett formulär. Med spread-syntaxen kan du enkelt skapa ett nytt objekt med den uppdaterade datan:

            const userProfile = {
  id: 123,
  name: 'Alice',
  email: 'alice@example.com',
  location: 'New York'
};

const updatedData = {
  email: 'alice.new@example.com',
  location: 'London'
};

const updatedProfile = { ...userProfile, ...updatedData };

console.log(updatedProfile);
// {
//   id: 123,
//   name: 'Alice',
//   email: 'alice.new@example.com',
//   location: 'London'
// }

            

              
                Copy
              
            
          

Exempel 2: Hantera varor i en kundvagn

I en e-handelsapplikation kan du behöva uppdatera antalet av en vara i kundvagnen. Med spread-syntaxen kan du skapa en ny kundvagns-array med den uppdaterade varan:

            const cart = [
  { id: 1, name: 'Product A', quantity: 2 },
  { id: 2, name: 'Product B', quantity: 1 }
];

const productIdToUpdate = 1;
const newQuantity = 3;

const updatedCart = cart.map(item =>
  item.id === productIdToUpdate ? { ...item, quantity: newQuantity } : item
);

console.log(updatedCart);
// [
//   { id: 1, name: 'Product A', quantity: 3 },
//   { id: 2, name: 'Product B', quantity: 1 }
// ]

            

              
                Copy
              
            
          

Exempel 3: Konfigurera applikationsinställningar

När du konfigurerar applikationsinställningar kanske du vill slå samman standardinställningar med användardefinierade inställningar. Object.assign() kan vara användbart för detta ändamål, särskilt om du behöver modifiera standardinställningsobjektet direkt:

            const defaultSettings = {
  theme: 'light',
  fontSize: 'medium',
  language: 'en'
};

const userSettings = {
  theme: 'dark',
  fontSize: 'large'
};

Object.assign(defaultSettings, userSettings);

console.log(defaultSettings);
// {
//   theme: 'dark',
//   fontSize: 'large',
//   language: 'en'
// }

            

              
                Copy
              
            
          

I det här fallet modifieras defaultSettings på plats, vilket kan vara önskvärt eller inte beroende på din applikations krav.

Bästa praxis

• Förstå ytlig kopiering: Var medveten om att båda metoderna utför ytliga kopior. För djupkopiering, använd lämpliga tekniker eller bibliotek.
• Överväg oföränderlighet: Föredra om möjligt spread-syntaxen för att skapa nya objekt och främja oföränderlighet.
• Benchmarka vid behov: För prestandakritisk kod, benchmarka båda metoderna för att avgöra det snabbaste alternativet för ditt specifika användningsfall.
• Välj baserat på kontext: Välj den metod som bäst överensstämmer med din kodstil, projektkrav och kompatibilitetsbehov.
• Använd linters och kodstilsguider: Framtvinga konsekvent användning av Object.assign() och spread-syntaxen genom linters och kodstilsguider.
• Dokumentera dina val: Dokumentera tydligt ditt resonemang för att välja den ena metoden framför den andra, särskilt i komplexa kodbaser.

Slutsats

Object.assign() och spread-syntaxen är värdefulla verktyg för objektmanipulering i JavaScript. Medan spread-syntaxen ofta erbjuder något bättre prestanda och främjar oföränderlighet, förblir Object.assign() relevant för att modifiera befintliga objekt och bibehålla kompatibilitet med äldre miljöer. Att förstå nyanserna i varje metod gör att du kan fatta välgrundade beslut och skriva mer effektiv och underhållbar kod.

Genom att överväga prestandaegenskaper, användningsfall och bästa praxis som beskrivs i denna artikel kan du effektivt utnyttja både Object.assign() och spread-syntaxen för att förbättra ditt JavaScript-utvecklingsflöde och bygga robusta och skalbara applikationer för en global publik. Kom ihåg att alltid prioritera kodens tydlighet och underhållbarhet samtidigt som du optimerar för prestanda när det är nödvändigt. Mikro-benchmarking och profilering av din kod kan också hjälpa dig att identifiera prestandaflaskhalsar och fatta datadrivna beslut om vilken metod som ska användas i specifika scenarier.